<template>
  <yy-paging v-model="dataList" @query="queryList" ref="paging" :auto="automatic" @scroll="scroll" :refresher-enabled="false">
    <template #top>
      <u-navbar
        back-text=""
        :is-back="false"
        :background="{ backgroundColor: isScroll ? '#FFFFFF' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
        <view class="grid grid-cols-3 items-center px-4 w-full">
          <view class="col-span-1" @click="vk.navigateBack()">
            <u-icon name="nav-back" size="44" color="#606266"></u-icon>
          </view>
          <view class="flex col-span-1 justify-center">
            <view class="text-base text-[#000] font-bold"> 意见反馈 </view>
          </view>
          <view class="flex col-span-1 justify-end" @click="vk.navigateTo('/pages/my/myFeedback')">
            <view class="text-[14px] text-[#5C6068]"> 我的反馈 </view>
          </view>
        </view>
      </u-navbar>
    </template>
    <view class="flex flex-col gap-4 p-4">
      <view class="text-[14px] text-[#161A24]"> 反馈内容* </view>
      <view class="bg-[#F4F6F8] rounded-[12px] flex flex-col gap-1 p-4">
        <textarea placeholder="建议可以给我配送渔具" maxlength="200" v-model="description" class="w-full"></textarea>
        <view class="flex justify-end text-[12px] text-[#C0C4CC]">
          <view>{{ description.length }}/200</view>
        </view>
      </view>

      <view class="text-[14px] text-[#161A24]">
        <text> 上传图片*</text>
        <text class="text-[12px] text-[#C1C4C9]">{{ iamgesList.length }}/3</text>
      </view>
      <view class="grid grid-cols-3 gap-3">
        <view class="bg-[#F4F6F8] rounded-[8px] aspect-square flex justify-center items-center relative border" v-for="(i, k) in iamgesList" :key="k">
          <image
            :src="i"
            class="size-full"
            mode="scaleToFill"
            @click="
              vk.myfn.previewImage({
                urls: iamgesList,
                current: k
              })
            "
          />
          <view
            @click="deleteImage(k)"
            class="w-[20px] h-[20px] bg-[#000000]/40 rounded-[0px_8px_0px_8px] absolute right-0 top-0 flex justify-center items-center"
          >
            <u-icon name="close" color="#fff" size="20"></u-icon>
          </view>
        </view>
        <view v-if="iamgesList.length < 3" @click="uploads" class="bg-[#F4F6F8] rounded-[8px] aspect-square flex justify-center items-center">
          <image src="/static/iconAddGr@3X.png" class="size-[28px]" mode="scaleToFill" />
        </view>
      </view>

      <view class="text-[14px] text-[#161A24]"> 联系方式* </view>
      <view class="bg-[#F4F6F8] h-[40px] rounded-[8px] px-4 flex items-center">
        <input type="number" maxlength="11" placeholder="请输入联系方式" v-model="contact" class="w-full" />
      </view>
    </view>
    <template #bottom>
      <view class="px-4 py-3">
        <!-- #99DBDC -->
        <view class="flex justify-center">
          <view class="h-[44px] bg-[#00A9AB] w-full rounded-full flex items-center justify-center" @click="submit">
            <text class="text-[16px] text-[#E5F6F6]">提交</text>
          </view>
        </view>
      </view>
    </template>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false,
        dataList: [],
        iamgesList: [],
        automatic: false,
        contact: '',
        description: ''
      }
    },

    methods: {
      async submit() {
        vk.pubfn.debounce(async () => {
          if (!this.description) return vk.toast('请输入反馈内容')
          if (this.iamgesList.length === 0) return vk.toast('请上传图片')
          if (!this.contact) return vk.toast('请输入联系方式')
          if (!/^1[3-9]\d{9}$/.test(this.contact)) return vk.toast('请输入正确的手机号码')

          let obj = {
            description: this.description,
            contact: this.contact,
            image: this.iamgesList.join('|')
          }
          let res = await api.feedback(obj)
          console.log('🚀 ~ submit ~ res:', res)
          vk.toast(res.msg)
          if (!res.code) return
          // 清空表单数据
          this.contact = ''
          this.description = ''
          this.iamgesList = []
          vk.navigateTo('/pages/my/myFeedback')
        }, 1000)
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        this.$refs.paging.complete([1, 1, 1])
      },

      deleteImage(k) {
        // 删除指定索引的图片
        vk.confirm('是否确认删除该图片', res => {
          if (res.confirm) {
            this.iamgesList.splice(k, 1)
          }
        })
      },
      async uploads() {
        try {
          const url = await vk.myfn.uploadImage({
            count: 1,
            topic: 'products'
          })
          this.iamgesList.push(url)
        } catch (err) {
          console.error('上传失败:', err)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #ffffff !important;
  }
</style>
